<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运行明细</title>
    <link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="/businessProcessManager/css/style.css">
</head>
<body>
<header>
    <img src="/businessProcessManager/images/logo.png" alt="">
    <span class="com-name">业务流程管理平台</span>
</header>
<div>
    <div class="side" id="side">
        <div id="menu" class="menu">
            <el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>业务流程管理</template>
                    <!--<a href="/businessProcessManager/html/process.html"><el-menu-item index="1-1">流程管理</el-menu-item></a>-->
                    <a href="/businessProcessManager/html/process-list.html"><el-menu-item index="1-1">流程定义</el-menu-item></a>
                   <!-- <a href="/businessProcessManager/html/sortManager.html"><el-menu-item index="1-2">分类管理</el-menu-item></a>-->
                    <a href="/businessProcessManager/html/run-task.html"><el-menu-item index="1-3">待办任务</el-menu-item></a>
                    <a href="/businessProcessManager/html/monitor.html"><el-menu-item index="1-3">运行监控</el-menu-item></a>
                    <a href="/businessProcessManager/html/task-entrust.html"><el-menu-item index="1-4">任务委托</el-menu-item></a>
                    <a href="/businessProcessManager/html/model-list.html"><el-menu-item index="1-4">模型管理</el-menu-item></a>
                   <!-- <a href="user-group.html"><el-menu-item index="1-5">用户分组</el-menu-item></a>
                    <a href="dataAllocation.html"><el-menu-item index="1-6">数据配置</el-menu-item></a>
                    <a href="exampleAllocation.html"><el-menu-item index="1-7">实例配置</el-menu-item></a>-->
                </el-submenu>
            </el-menu>

        </div>
    </div>
    <div class="main-wrapper " >
        <div class="nav-bar">
            <span class="position-info">您现在的位置：<a>公文管理</a> &gt; <span class="current-position">公文会签</span></span>
        </div>
        <div class="content-wrapper" style="top: 45px;">
            <div id="tab" class="run-detail">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="运行明细" name="first">
                        <div class="table-box">
                            <div class="center">
                                <el-table
                                        :data="detailList"
                                        border
                                        height="600"
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="id"
                                            label="任务ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="processDefinitionId"
                                            label="流程定义ID">
                                    </el-table-column>
                                    <el-table-column
                                            prop="processInstanceId"
                                            label="流程实例ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="任务名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="assignee"
                                            label="办理人"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="startTime"
                                            label="开始时间"
                                            :formatter="dateFormat"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="endTime"
                                            label="结束时间"
                                            :formatter="dateFormatEndTime"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="durationInMillis"
                                            label="办理时长"
                                            :formatter="durationInMillisFormatter"
                                    >
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        @current-change="handleCurrentChange"
                                        :page-size="size"
                                        layout="total, prev, pager, next"
                                        :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="流程图" name="second">
                    <iframe name="diagram" height="700px" width="100%" src=""></iframe>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="foot-biu">
             四川新迎顺信息技术股份有限公司
        </div>
    </div>
</div>

<!-- 先引入 Vue -->
<script src="/businessProcessManager/js/ele/vue.js"></script>
<script src="/businessProcessManager/js/ele/vue-resource.js"></script>
<script src="/businessProcessManager/js/ele/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="/businessProcessManager/js/ele/index.js"></script>
<script src="/businessProcessManager/js/jquery.min.js"></script>
<script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/businessProcessManager/js/date.js"></script>
<!--引入url配置文件-->
<script src="/businessProcessManager/js/config.js"></script>
<script>
	var parameter=getQueryString("processInstanceId");
	var processDefinitionId=getQueryString("processDefinitionId");
	$("iframe").attr("src","/diagram-viewer/index.html?processDefinitionId="+processDefinitionId+"&processInstanceId="+parameter);
    var menu = new Vue({
        el:'#menu',
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });

    var tab = new Vue({
        el:'#tab',
        data:{
            activeName: 'first',
            formLabelWidth:'180px',
            detailForm:{
            	processDefinitionId:'',
                eg:''
            },
            detailList:[],
            total:0 ,
            currentPage: 1,
            size: 10
        },
        created:function(){
            this.getTaskInstances();
        },
        methods:{
            //分页查询
            handleCurrentChange:function(data){
                var start=data+1;
                this.$http.get(url+port+"history/historic-task-instances?processInstanceId="+parameter+"&start="+start).then(function(data){
                    tab.detailList=data.data.data;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },
        	//格式化开始时间
        	dateFormat:function(data,row){
        	    if(data.startTime!=null){
                    return formatDates(data.startTime);
                }
        	},
        	//格式化结束时间
        	dateFormatEndTime:function(data,row){
        	    if(data.endTime!=null){
                    return formatDates(data.endTime);
                }
        	},
        	//秒转化为分钟
        	durationInMillisFormatter:function(data,row){
        	    if(data.durationInMillis!=null){
                    return (data.durationInMillis/60000).toFixed(0)+"分钟";
                }
            },
        	//获取历史任务实例
        	getTaskInstances:function(){
                this.$http.get(url+port+"history/historic-task-instances?processInstanceId="+parameter).then(function(data){
                	tab.detailList=data.data.data;
                    tab.total = data.data.total;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },
            handleClick:function(tab, event) {
                console.log(tab, event);
            },
            save1:function () {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    duration:1000000,
                    message: '您有4个文件需要进行会签！'
                });
            }
        }
    });
    function getQueryString(name) {
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    	var r = window.location.search.substr(1).match(reg);
    	if (r != null) return unescape(r[2]); return null;
    };
    function formatDates(time){
    	return formatDate(new Date(time),'yyyy-MM-dd hh:mm');
    };
</script>
</body>
</html>
